<!-- 配置页面路径  -->

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>修改</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="${request.contextPath}${staticPath}/admin/plugins/bootstrap/css/bootstrap.min.css">  
        <!-- <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap-theme.css" rel="stylesheet"> -->
    <link href="https://cdn.bootcss.com/font-awesome/5.10.2/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="${request.contextPath}/admin/plugins/fontawesome-iconpicker/dist/css/fontawesome-iconpicker.min.css">
    <!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> -->
    <script src="${request.contextPath}${staticPath}/admin/plugins/jquery/jquery-3.4.1.min.js"></script>
    	<script src="${request.contextPath}${staticPath}/admin/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> -->
    <script src="${request.contextPath}/admin/plugins/fontawesome-iconpicker/dist/js/fontawesome-iconpicker.min.js"></script>
	
	<style>
            
            .icon1{
            	width:300px !important;
            }
            .span1{
            	right:600px !important];
            }
            .input-group-addon{
            	width:0 !important;
            }
            /* 如果使用远程，请自行调整图标容器宽度*/
            .iconpicker-popover.popover{width:335px;}
        </style>
</head>
<body>
	
<div class="container">
	<h2>修改</h2>      
	<form role="form" action="javascript:void(0);" method="post">
	  <div class="form-group">
	    <label for="id">编号</label>
	    <input type="text" class="form-control" name="id" id="id" value="${menu.id}" placeholder="请输入编号">
	  </div>
	  <div class="form-group">
	    <label for="name">菜单名称</label>
	    <input type="text" class="form-control" name="name" id="name" value="${menu.name}" placeholder="请输入名称">
	  </div>
	  <!-- 图标选择器 -->
	  <div class="form-group">
	    <label for="icon">图片</label>
	    <div class="input-group">
         <input data-placement="bottomRight" class="form-control icp icp-auto icon1" value="${menu.icon}"  type="text" name="icon" id="icon" placeholder="请输入图片地址"/>
          <span class="input-group-addon span1"></span>
         </div> 
	  <div class="form-group">
	    <label for="url">跳转地址</label>
	    <input type="text" class="form-control" name="url" id="url" value="${menu.url}" placeholder="请输入跳转地址">
	  </div>
	  <div class="form-group">
	    <label for="pid">父级ID</label>
	    <input type="text" class="form-control" name="pid" id="pid"  value="${menu.pid}" placeholder="请输入父级ID">
	  </div>
	  <div class="form-group">
	    <label for="status">状态</label>
	    <input type="number" class="form-control" name="status" id="status"  value="${menu.status}" placeholder="请输入状态">
	  </div>
	  <div class="form-group">
	    <label for="sort">排序</label>
	    <input type="number" class="form-control" name="sort" id="sort"  value="${menu.sort}" placeholder="请输入排序">
	  </div>
	  <button type="submit" class="btn btn-default" onclick="admin_menu()">提交</button>
	</form> 
</div>
<script type="text/javascript">
	function admin_menu(){
		console.log("aaa")
		var data={
				"id":$("#id").val(),
				"name":$("#name").val(),
				"icon":$("#icon").val(),
				"url":$("#url").val(),
				"pid":$("#pid").val(),
				"status":$("#status").val(),
				"sort":$("#sort").val()
		}
		$.ajax({
			"url" : "${request.contextPath}/admin/menuEdit",
	        "contentType": "application/json",
	    	"data":JSON.stringify(data),
	    	"type" : "post",
	    	"dataType" : "json",   
	    	"success"	: function(){
	    		alert('修改成功')
	    		window.location.href="${request.contextPath}/admin/menuGetAll";
	    	}
	    		
		});
	}
	
	$(function () {
        // 图标可以点击选中 icp-auto 操作图标元素
        $('.icp-auto').iconpicker({
            title: '请选择一个图标',
            //  指定图标
            //icons:['fa-github', 'fa-heart', 'fa-html5', 'fa-css3'],
            // 添加其他图标 加入 bootstrap  glyphicon 字体图标
            icons: $.merge(['glyphicon-home', 'glyphicon-repeat', 'glyphicon-search',
                'glyphicon-arrow-left', 'glyphicon-arrow-right', 'glyphicon-star'], $.iconpicker.defaultOptions.icons),
                fullClassFormatter: function (val) {
                if (val.match(/^fa-/)) {
                    return 'fa ' + val;
                } else {
                    return 'glyphicon ' + val;
                }
            },
            component: '.input-group-addon', // 图标存放容器
            /* Placements: inline topLeftCorner topLeft top topRight topRightCorner rightTop right rightBottom bottomRightCorner bottomRight bottom bottomLeft bottomLeftCorner leftBottom left leftTop*/
            placement: 'bottomRightCorner',  // 图标容器位置
        });

        // 图标不可以点击, 绑定 .icp 元素
        // $.iconpicker.batch('.icp', 'destroy');

        // 点击下拉按钮显示图标
        $('.btn-group>button').one("click", function () {
            console.log(1);
            $('.icp-dd').iconpicker({
                //title: 'Dropdown with picker',
                //component:'.btn > i'
            });
        });
    });
</script>
</body>
</html>